<template>
  <div>
    <!--搜索栏-->
    <Search></Search>
    <!-- 添加成功提示 -->
    <div class="add-info-box-container">
      <div class="add-info-box">
        <div class="add-info-detail">
          <div class="add-info-title">
            <p>
              <i class="fa fa-check-circle"></i> 商品已成功加入购物车！</p>
          </div>
          <div class="add-info-box-row">
            <div class="add-info-img">
              <img :src="goods.thumbnail" alt="">
            </div>
            <div class="add-info-intro">
              <p>{{goods.goodsName}}</p>
              <p class="add-info-intro-detail">数量：{{goods.count}}</p>
            </div>
          </div>
        </div>
        <div class="car-btn-group">
          <div></div>
          <div class="car-btn-row">
            <a-button type="outline" status="danger" class="mr_10" @click="router.push(`/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`)">查看商品详情</a-button>
            <a-button type="primary" status="danger" class="mr_10" @click="router.push('/cart')">去购物车结算></a-button>
          </div>
        </div>
      </div>
    </div>


  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import { useRouter, useRoute } from 'vue-router';

  const route = useRoute();
  const router = useRouter();
  const goods = ref<any>({}); // 商品详情

  onMounted(() => {
    goods.value = {
      id: route.query.id,
      goodsId: route.query.goodsId,
      thumbnail: route.query.thumbnail,
      goodsName: route.query.goodsName,
      count: route.query.count
    };
  })
</script>

<style scoped lang="less">
  /****************************加入购物车页面开始*****************************/
  .add-info-box-container{
    width: 100%;
    background-color: #F5F5F5;
  }
  .add-info-box{
    width: 1200px;
    margin: 0px auto;
    padding: 15px 0px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .add-info-detail{
    display: flex;
    flex-direction: column;
  }
  .add-info-title{
    font-size: 25px;
    color: #71b247;
  }
  .add-info-box-row{
    display: flex;
    flex-direction: row;
    margin-top: 15px;
  }
  .add-info-img{
    width: 56px;
    height: 56px;
    margin-right: 15px;
  }
  .add-info-img img{
    width: 100%;
  }
  .add-info-intro{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .add-info-intro-detail{
    font-size: 12px;
    color: #999999;
  }
  .car-btn-group{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  /*按钮*/
  .btn-car{
    padding: 8px 10px;
    font-size: 16px;
    border-radius: 0px;
    border:none;
    margin-right: 15px;
  }
  .btn-car-to-detail{
    background-color: #fff;
    color: @theme_color;
    border:1px solid #fff;
  }
  .btn-car-to-detail:hover{
    border:1px solid @theme_color;
  }
  .btn-car-to-pay{
    background-color: @theme_color;
    color: #fff;
    border:1px solid @theme_color;
  }
  .btn-car-to-pay:hover{
    background-color: @theme_color;
    border:1px solid @theme_color;
  }
  /*其他用户购买*/
  .other-user-buy-box{
    width: 90%;
    margin: 0px auto;
    display: flex;
    flex-direction: column;
  }
  .other-user-buy-title{
    margin-top: 25px;
    font-size: 14px;
    color: #666;
    font-weight: bold;
  }
  .other-user-buy-row{
    margin-top: 25px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .other-user-buy-item-box{
    display: flex;
    flex-direction: row;
  }
  .other-user-buy-item-img{
    width: 96px;
    height: 96px;
  }
  .other-user-buy-item-img img{
    width: 100%;
  }
  .other-buy-detail-box{
    width: 160px;
    margin-left: 15px;
    display: flex;
    flex-direction: column;
  }
  .other-buy-title{
    font-size: 12px;
  }
  .other-buy-title a{
    color: #2c2c2c;
    text-decoration: none;
  }
  .other-buy-price{
    font-size: 12px;
    font-weight: bold;
    color: @theme_color;
  }
  .other-buy-btn{
    padding: 3px 10px;
    color: @theme_color;
    font-size: 12px;
    border: 1px solid @theme_color;
    border-radius: 0px;
    background-color: #fff;
  }
  .other-buy-btn:hover{
    color: @theme_color;
    border: 1px solid @theme_color;
  }
  /****************************加入购物车页面结束*****************************/
</style>
